<!-- 会话 -->
<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!-- 客户树 -->
      <el-col :lg="4" :xs="24" class="mb-[12px]">
        <client-tree
          v-model="queryParams.sessionId"
          @node-click="handleQuery"
        />
      </el-col>
      <!-- 会话列表 -->
      <el-col :lg="20" :xs="24">
        <!-- <div class="search-container">
          <el-form ref="queryFormRef" :model="queryParams" :inline="true">
            <el-form-item label="关键字" prop="clientName">
              <el-input
                v-model="queryParams.clientName"
                placeholder="客户名称"
                clearable
                style="width: 200px"
                @keyup.enter="handleQuery"
              />
            </el-form-item>

            <el-form-item>
              <el-button type="primary" @click="handleQuery">
                <i-ep-search />
                搜索
              </el-button>
              <el-button @click="handleResetQuery">
                <i-ep-refresh />
                重置
              </el-button>
            </el-form-item>
          </el-form>
        </div> -->

        <el-card shadow="never" class="table-container">
          <!-- <template #header>
            <div class="flex-x-between">
              <div>
                <el-button type="success" @click="handleOpenDialog()">
                  <i-ep-plus />
                  新增
                </el-button>
              </div>
            </div>
          </template> -->

          <el-table
            v-loading="loading"
            :data="pageData"
            @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="50" align="center" />
            <el-table-column
              key="id"
              label="编号id"
              align="center"
              prop="id"
              width="100"
            />
            <el-table-column
              key="messageContent"
              label="内容"
              align="center"
              prop="messageContent"
            />

            <el-table-column label="创建时间" align="center" width="220">
              <template #default="scope">
                <text>
                  {{
                    new Date(scope.row.createdAt)
                      .toISOString()
                      .replace("T", " ")
                      .substring(0, 19)
                  }}
                </text>
              </template>
            </el-table-column>
          </el-table>

          <pagination
            v-if="total > 0"
            v-model:total="total"
            v-model:page="queryParams.current"
            v-model:limit="queryParams.pageSize"
            @pagination="handleQuery"
          />
        </el-card>
      </el-col>
    </el-row>

    <!-- 会话表单弹窗 -->
    <el-drawer
      v-model="dialog.visible"
      :title="dialog.title"
      width="500px"
      @close="handleCloseDialog"
    >
      <!-- <el-form
        ref="userFormRef"
        :model="formData"
        :rules="rules"
        label-width="80px"
      >
        <el-form-item label="编号id" prop="id">
          <el-input disabled v-model="formData.id" />
        </el-form-item>
        <el-form-item label="价钱(分)" prop="payAmount">
          <el-input disabled v-model="formData.payAmount" />
        </el-form-item>
        <el-form-item label="支付类型" prop="payType">
          <el-input disabled v-model="formData.payType" />
        </el-form-item>
        <el-form-item label="状态" prop="statusDesc">
          <el-input disabled v-model="formData.statusDesc" />
        </el-form-item>
        <el-form-item label="appId" prop="appId">
          <el-input disabled v-model="formData.appId" />
        </el-form-item>
        <el-form-item label="描述" prop="body">
          <el-input disabled v-model="formData.body" />
        </el-form-item>
        <el-form-item
          label="服务类型"
          prop="consultationServiceInfo.businessName"
        >
          <el-input
            disabled
            v-model="formData.consultationServiceInfo.businessName"
          />
        </el-form-item>
        <el-form-item
          label="客户名称"
          prop="consultationServiceInfo.clientName"
        >
          <el-input
            disabled
            v-model="formData.consultationServiceInfo.clientName"
          />
        </el-form-item>
        <el-form-item
          label="客户电话"
          prop="consultationServiceInfo.clientPhone"
        >
          <el-input
            disabled
            v-model="formData.consultationServiceInfo.clientPhone"
          />
        </el-form-item>
        <el-form-item
          label="咨询类型"
          prop="consultationServiceInfo.consultationType"
        >
          <el-input
            disabled
            v-model="formData.consultationServiceInfo.consultationType"
          />
        </el-form-item>
        <el-form-item label="律师" prop="consultationServiceInfo.lawyerName">
          <el-input
            disabled
            v-model="formData.consultationServiceInfo.lawyerName"
          />
        </el-form-item>
        <el-form-item label="创建时间" prop="createdAt">
          <el-input disabled v-model="formData.createdAt" />
        </el-form-item>
      </el-form> -->

      <!-- <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCloseDialog">取 消</el-button>
        </div>
      </template> -->
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
defineOptions({
  name: "Session",
  inheritAttrs: false,
});

import sessionAPI, {
  SessionQuery,
  SessionForm,
  SessionVO,
} from "@/api/session";

const queryFormRef = ref(ElForm);
const userFormRef = ref(ElForm);

const loading = ref(false);
const removeIds = ref([]);
const total = ref(0);
const pageData = ref<SessionVO[]>();
/** 会话查询参数  */
const queryParams = reactive<SessionQuery>({
  current: 1,
  pageSize: 10,
  sessionId: undefined,
});

/**  会话弹窗对象  */
const dialog = reactive({
  visible: false,
  title: "",
});

// 会话表单数据
const formData = reactive<SessionForm>({
  id: undefined,
});

/** 会话表单校验规则  */
const rules = reactive({
  category: [{ required: true, message: "会话不能为空", trigger: "blur" }],
});

/** 查询 */
function handleQuery() {
  loading.value = true;
  sessionAPI
    .getOrderList(queryParams)
    .then((data) => {
      console.log(data, "会话列表");
      pageData.value = data.records;
      total.value = data.total;
    })
    .finally(() => {
      loading.value = false;
    });
}

/** 重置查询 */
function handleResetQuery() {
  // queryFormRef.value.resetFields();
  queryParams.current = 1;
  handleQuery();
}

/** 行复选框选中记录选中ID集合 */
function handleSelectionChange(selection: any) {
  removeIds.value = selection.map((item: any) => item.id);
}

/**
 * 打开弹窗
 *
 * @param id 会话ID
 */
async function handleOpenDialog(val?: any, flag?: string) {
  if (!flag) {
    dialog.visible = true;
    dialog.title = "会话详情";
    // sessionAPI.getOrderById(val.id).then((data) => {
    //   Object.assign(formData, {
    //     ...data,
    //     createdAt: new Date(data.createdAt as string)
    //       .toISOString()
    //       .replace("T", " ")
    //       .substring(0, 19),
    //   });
    // });
  } else {
    dialog.title = "退款";
  }
}

/** 关闭弹窗 */
function handleCloseDialog() {
  dialog.visible = false;
  userFormRef.value.resetFields();
  userFormRef.value.clearValidate();
  // formData.id = undefined;
}

/** 表单提交 */
const handleSubmit = useThrottleFn(() => {
  userFormRef.value.validate((valid: any) => {
    if (valid) {
      // const userId = formData.id;
      loading.value = true;
      // sessionAPIAPI
      //   .updateInsCategory(formData)
      //   .then(() => {
      //     if (userId) {
      //       ElMessage.success("修改会话成功");
      //     } else {
      //       ElMessage.success("新增会话成功");
      //     }
      //     handleCloseDialog();
      //     handleResetQuery();
      //   })
      //   .finally(() => (loading.value = false));
    }
  });
}, 3000);

/** 删除会话 */
function handleDelete(id?: number) {
  const userIds = [id || removeIds.value].join(",");

  ElMessageBox.confirm("确认删除会话?", "警告", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(
    function () {
      loading.value = true;
      // sessionAPIAPI
      //   .deleteInsCategory(userIds)
      //   .then(() => {
      //     ElMessage.success("删除成功");
      //     handleResetQuery();
      //   })
      //   .finally(() => (loading.value = false));
    },
    function () {
      ElMessage.info("已取消删除");
    }
  );
}

onMounted(() => {
  // handleQuery();
});
</script>
